<template>
 <GlobalCardBox title="文章隐私设置" :showDown="this.ARTICLEDETAILAUTHORITYDOWN">
   
  
    <div slot="content" id="content" >
        <div v-for="(item,index) in authorityData" :key="index" class="dataOne flex" @click="changeState(item.value)">
            <div class="select flex">
                <div v-if="authorityNow == item.value" class="active"></div>
            </div>
            <div class="label">{{item.label}}</div>
            <div  v-if="authorityNow == item.value && item.friend">
                {{selectFriends.length}}
                <i class="el-icon-edit"></i>
            </div>
        </div>
       
     

       <GlobalCardBox title="选择朋友" :contontStyle="selectFriendsStyle" v-if="selectFriendsState" :showDown="colseSelectFriend" >
          <div slot="content" id="friend" >
             <button v-for="(item,index) in Friends" :key="index" class="flex friendOne"  @click="SelectFriend(item.uid)">
               <img :src="item.headphoto" class="headphoto">
               <div class="username oveflow">{{item.username}}</div>
               <font-awesome-icon icon="circle-check" class="icon" v-if="judgeSelect(item.uid)"/>
               <div v-else class="deactive"></div>
             </button>
          </div>
           <div  class="submitBox flex" slot="footer">
             <el-button class="submit" round icon="el-icon-position" @click="submit('select')">保存{{selectFriends?.length}}</el-button>
          
          </div>
       </GlobalCardBox>

    </div>
</GlobalCardBox>
</template>
<script>
import GlobalCardBox from '@/components/Package/GlobalCardBox/GlobalCardBox.vue'
import { mapActions, mapMutations, mapState } from 'vuex'
import common from "@/common/global"
  export default 
  {
     components: { GlobalCardBox },
     name :'', 
     computed:{
        ...mapState('ArticleDetail',['ArticleDetail']),
        ...mapState('Inform',['Friends'])
     },
     data() {
        return {
       
          
            authorityNow: 1,

            selectFriends:[],//选择的朋友
            selectFriendsState:false,
            selectFriendsStyle:{ //样式
               width:'400px',
               height:'300px'
            },
            //权限控制
            authorityData:[
                {label:'公开可见',name:'viewed',value:1},
                {label:'朋友可见',name:'viewed',value:2},
                {label:'部分可见',name:'viewed',value:3,friend:true},
                {label:'私密·仅自己可见',name:'viewed',value:0},
            ]
        }
     },
     created(){
        this.authorityNow=this.ArticleDetail?.viewed,
        this.selectFriends = this.ArticleDetail?.canViewUser?.split(',') || []
        this.selectFriends = this.selectFriends.filter(item => item != '')
     
     },
   
  
     methods: {
        ...mapMutations('ArticleDetail',['ARTICLEDETAILAUTHORITYDOWN','SETARTICLEDETAIL_']),
        ...mapActions('Article',['Edit','GetArticleDetail']), //修改
        colseSelectFriend(){
          this.selectFriendsState =false
        },
        changeState(state){
            if(state == 3) return this.selectFriendsState =true
            this.authorityNow = state
            this.submit()
        },
        judgeSelect(uid){ //判断是否已经选择
             uid = uid.toString()
           return this.selectFriends.includes(uid)
        },
        SelectFriend(uid){
           uid = uid.toString()
          if( this.judgeSelect(uid))
          { 
             let index = this.selectFriends.findIndex(item => item == uid)
             this.selectFriends.splice(index,1)
             return
          }
          this.selectFriends.push(uid)
    

        },
        async submit(type){

          let form = Object.assign({},this.ArticleDetail)
          //选中的朋友
          if(type=='select') {
           
            if(this.selectFriends.length == 0) return this.$message.error('请至少选中一个朋友')  
             this.authorityNow=3 
             form.canViewUser = this.selectFriends.length == 0 ? null : this.selectFriends.toString() + ','     
           }

         
           form.image = form.image?.toString()
           form.viewed = this.authorityNow

        
     
           let res = await this.Edit(form)

           if(res.code == 200)   { //成功
    
               this.$message.success(res.message)   
               form.image = form.image?.split(',')
                this.ARTICLEDETAILAUTHORITYDOWN()
               this.SETARTICLEDETAIL_(form)
              
           }
           else if(res.code == -1) { //Token 解析失败
               this.ARTICLEDETAILAUTHORITYDOWN()
               common.tokenFaile()
           }
           //一般错误
           else if(res.code != 200) this.$message.error(res.message)
        },

     },
  }
</script>
<style scoped lang='less'>
#content{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
     
}
.dataOne{
    width: 100%;
    margin: 10px;
    color: var(--fontColor);
    justify-content: flex-start;

    .select{
     
      border: 2px solid var(--fontColor);
      padding: 7px;
      width: 0px;height: 0px;
      border-radius: 50%;
      margin-right: 5px;
      position: relative;

      .active{
         position: absolute;
         border-radius: 50%;
         width: 8px;
         height: 8px;
         background: var(--GeneralBackColor);
       }
     }
    .label{
        margin-right: 5px;
        font-size: 18px;
    }
 }
#friend{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
}
 //朋友
 .friendOne{
   width: 100%;
   justify-content: flex-start;
   margin-bottom: 5px;
   flex-wrap: nowrap;

    
   .headphoto{
      width: 40px;
      height: 40px;
   }
   .username{
    width: 100%;
    font-size: 18px;
    margin-left: 5px;
    text-align: left;
   }
   .icon{
      font-size: 20px;
      color: var(--GeneralBackColor);
   }
   .deactive{
       border: 2px solid var(--fontColor);
       padding: 7px;
       border-radius: 50%;
   }
 }


.submitBox{
    width: 100%;
    position: absolute;
    bottom: 10px;
    z-index: 5;

    .submit{
        background: var(--GeneralBackColor);
        color: white;
        width: 200px;
        border: none;
    }
}

</style>